import styles from "@pages/article/styles/styles.module.less";
import { useFollowUserMutation, useUnFollowUserMutation } from "@service/article";
import classNames from "classnames";

interface Props {
  isFollow: boolean|undefined;
  userId: string|undefined;
}

export default function Follow({ isFollow, userId }: Props) {
  const [follow] = useFollowUserMutation();
  const [unFollow] = useUnFollowUserMutation();
  const requestFollow = () => {
    isFollow ? unFollow(userId) : follow(userId);
  };
  return (
    <button
      onClick={requestFollow}
      className={classNames({ [styles.active]: isFollow })}
    >
      {isFollow ? '已关注' : '关注'}
    </button>
  );
}